<template>
  <div id="app">
    <router-view/>
    <footer>
      <!-- 声明式 -->
      <!-- <ul>
        <router-link to="/home" tag="li">首页</router-link> -->
        <!-- <router-link to="/kind" tag="li">分类</router-link> -->
        <!-- <router-link :to="{ path: '/kind' }" tag="li">分类</router-link>
        <router-link :to="{ path: '/cart', query: { id: 100 } }" tag="li">购物车</router-link>
        <router-link to="/user?id=1000" tag="li">我的</router-link>
      </ul> -->
      <!-- 编程式 -->
      <ul>
        <li @click="$router.push('/home')">首页</li>
        <li @click="$router.push('/kind')">分类</li>
        <li @click="$router.push('/cart')">购物车</li>
        <li @click="$router.push('/user')">我的</li>
      </ul>
    </footer>
    <!--
      声明式跳转 标签 a href
      编程式跳转 js  window.location.href = ""

      vue
        声明式 router-link tag(router-link默认为a标签，tag可以声明要渲染为什么标签)
        编程式 this.$router.push() / replace() /back() / go(-1)

      选中的元素会自带选中的class样式 router-link-active
     -->
  </div>
</template>

<style lang="stylus">
.router-link-active
  color #f66
#app
  font-family Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  margin-top 60px
</style>
